<template>
	<view class="height-vh overflow-hidden flex-direction-row">
		<!-- 左侧一级导航 -->
		<scroll-view scroll-y class="bg-or height-vh" style="width: 200rpx;">
			<view class="flex-direction-column">
				<block v-for='(item,index) in categoryList' :key='index'>
					<text class="text-df text-center padding-tb select-no" :class="{'select-on color-df' :item.id==scrollId}"
						@click="change(item.id)">{{item.name}}</text>
				</block>
			</view>
		</scroll-view>
		<!-- 右侧二级导航 -->
		<scroll-view scroll-y class="flex-sub height-vh" :scroll-into-view="'scrollId'+scrollId">
			<block v-for='(item,index) in categoryList' :key='index'>
				<!-- 头 一级分类 -->
				<view class="padding-top flex-direction-row justify-center align-center" :id="'scrollId'+item.id">
					<text class="line"></text>
					<text class="text-df color-green margin-bottom-xs">{{item.name}}</text>
					<text class="line"></text>
				</view>
				<!-- 子分类 -->
				<view class="flex-direction-row flex-wrap align-center padding">
					<block v-for='(it,ind) in item.sublist' :key='index'>
						<view class="flex-direction-column align-center col-3 margin-bottom"
							@click="$navigator('/pages/mall/list?secondCategoryId='+it.id+'&storeId='+storeId)">
							<image :src="it.logoUrl" class="cu-goods" mode="aspectFit"></image>
							<text class="text-smd margin-top-xs">{{it.name}}</text>
						</view>
					</block>
				</view>
			</block>
		</scroll-view>
	</view>
</template>

<script>
	// import goods from "@/components/goods.vue"
	import {
		categoryList
	} from "@/common/mall.js"
	export default {
		onLoad(option) {
			this.storeId = option.storeId;
			console.log('option: ',option);
			this.userinfo = uni.getStorageSync('userinfo')
			this.getCategoryList();
			// this.getGoods();
		},
		data() {
			return {
				categoryList: [],
				selectIndex: 0,
				scrollId: '',
				userinfo:{},
				goodsList: [],
				storeId:''
				// sublist: [],
			}
		},
		methods: {
			async getCategoryList() {
				this.categoryList = await categoryList({
					storeId:this.userinfo.storeId,
					type: 1
				});
				// 给scrollId设置默认值
				this.scrollId = this.categoryList[0]?.id;
				// 给scrollId设置默认值
				console.log('this.categoryList: ', this.categoryList);
			},
			change(scrollId) {
				this.scrollId = scrollId;
			},
		}
	}
</script>

<style scoped>
	.select-no {
		border-left: 6rpx solid rgba(0, 0, 0, 0);
	}
	.select-on {
		background: rgba(217,55,34,0.1);
		border-left: 6rpx solid rgba(217,55,34);
	}

	.line {
		width: 130rpx;
		height: 1rpx;
		margin: 0 20rpx;
		background-color: #999;
	}

	.ball {
		width: 50px;
		height: 50px;
		/* position: fixed; */
		background-color: red;
		border-radius: 50%;
		/* top: 20rpx;
		right: 20rpx; */
		transition: left .6s linear, top .6s cubic-bezier(0.5, -0.5, 1, 1)
	}
</style>